<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title flex-between">
      <span class="t-name">产品类型</span>
    </div>
    <div id="productType"></div>
  </div>
</template>
<script>
  const colors = [
    {
      borderColor: '#0895E0',
      color: 'rgba(8,149,224,0.36)'
    },


  ]


  export default {

    props:{
      productTypeStatisticVOS:{
        type:Array,
        default:[]
      }
    },
    name:'productType',
    data(){
      return{
        chart: null,
        option: {
          backgroundColor: 'transparent',
          grid: {
            top: 60,
            right: 50,
            bottom: 35,
            left: 80,
          },
          tooltip: {
            trigger: 'axis',
            // formatter: function (series) {
            //   return `${series[0].data.name}:${series[0].data.value}`
            // },
            textStyle: {
              color: '#ffffff'
            },
            backgroundColor: 'rgba(0, 34, 81, 0.85)',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ECF0FF', //更改坐标轴文字颜色
                fontSize: 32, //更改坐标轴文字大小
                fontWeight:'bold',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              }
            },
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: true,

            },
            axisLabel: {
              fontSize:32,
              fontWeight:'bold',
              margin: 20,
              show: true,
              color:'#ECF0FF'
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              },
            },
          },
          series: [

          ],
        },
      }
    },
    methods:{
      setOption(){
        let xAxis = [],data = [];
        this.productTypeStatisticVOS.forEach((o,i)=>{
          xAxis.push(o.deviceTypeName||'未知')
          data.push(Number(o.actualPrice))

        })
        const series = [{
          type:'bar',
          data,
          barWidth: 50,
          itemStyle : {
            borderColor: colors[0].borderColor,
            color: colors[0].color,
          }
        }]
        this.option.xAxis.data = xAxis;
        this.option.series = series;
        this.chart.setOption(this.option, true)
      },
      initChart () {
        this.chart = this.$echarts.init(
          document.getElementById(`productType`)
        )
        this.chart.setOption(this.option, true)
      }
    },
    mounted () {
      this.initChart()
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container{
    width: 100%;
    background: url("../../assets/imgs/product_type_bg.png");
    padding: 23px;
    .pannel-title {
      background: url("../../assets/imgs/product_title.png") no-repeat;
    }
    #productType{
      flex: 1;
      min-height: 0;
    }
  }
</style>
